Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature / Drops #359

Merged
merged 70 commits into from
Oct 2, 2023
Merged

Feature / Drops #359

merged 70 commits into from
Oct 2, 2023

Conversation

ismailToyran
Copy link
Contributor

@ismailToyran ismailToyran commented Aug 9, 2023

Project organization

Description

Adds drop feature to the starter kit. You can navigate to the drops page to see upcoming, in progress and ended drops.
And drop detail page by clicking cards on drops page to navigate and participate on the drop.

Checklist

Todo

  • Need to release new version of liteflow-js. Build will pass when we release and update @liteflow/core and @liteflow/react packages

@ismailToyran ismailToyran self-assigned this Aug 9, 2023
@EmmanuelDrouin
Copy link
Member

EmmanuelDrouin commented Aug 14, 2023

@ismailToyran a few initial feedback:

  • Issues with the titles sizes on a drop detail page
    • It seems that either they are too big or too small. I would suggest to adjust the H2, H3, etc. to match the starter kit UI and not follow the previous UI implementation that does not match here
    • Related to: "Mint ended", "minting schedule", "drop title", etc.
    • Screen Shot 2566-08-14 at 11 50 34
  • Is it possible for the title (H1) of a drop details page to be "Drops - Collection name"? That would be better compared only drops for SEO, but let me know if this is too complex and time consuming.
    • Do we need an "extra" title here? We don't use titles like that on collection or NFT details pages, so asking for consistency
  • On a drops details page, we are missing the "blockchain info" associated with the collection, like we have on a collection details page.
    • Screen Shot 2566-08-14 at 11 47 46
  • For the number selector (to select the quantity to mint), do we already have a component that we can use? The current implementation does not look like a component we are already using (UI wise)
    • Screen Shot 2566-08-14 at 11 52 33

3 UI issues:

  • Once sign in, but not eligible, the button label display "accept bid"

    • Screen Shot 2566-08-14 at 11 31 33
  • The countdown should be display in one line, and not on two lines (we have plenty of space)

    • Screen Shot 2566-08-14 at 11 31 37
  • On responsive drops details page, the border is cropped for the cards on the left and right side

    • Screen Shot 2566-08-14 at 11 42 13
  • In terms of colors, I would suggest you follow the previous UI implementation to match where to use primary colors, black and gray colors.

  • The progress bar should use Primary color

  • The sub-text should use gray color

  • For the BG color in the "minting" block we could use the same BG color as we are using for the bg media on an NFT detail page (to not have a full white page like right now)

  • For the black color use with opacity on the drops page for the card we could reduce it to 70% as it is a bit too dark currently

  • It would be nice also if you can add the hover effect on the card with the zoom in the media use in the bg (similar hover as we are doing on other cards to bring dynamism here)

Layout proposal

On the Starter kit, the current implementation for the "minting" block and "minting schedule" sections are taking full width.

  • Screen Shot 2566-08-14 at 11 57 09
  • To improve the implementation on the starter kit I would love to explore a layout where both sections are displayed next to each other. So "Minting Schedule" displayed on the left (taking 50% width) and the "minting" section displayed next to it on the right (taking 50% width)
    • This will reduce the height of the page and make the UI more accessible UX wise

@ismailToyran Do you have prepared a state when there will be no drops displayed yet? When we release this feature, everyone who wants to leverage it will have an empty page by default before they create their first drop. We need to think about this case and prepare a layout that will not display an empty pages to end-users.

  • We could have a banner displayed on top (like the previous UI implementation) with a text like "Explore exclusive Drops from prominent NFT collections" with a customizable image in the bg for clients to customize. And we could add en empty state bellow it when there are no drops listed.

@antho1404 antho1404 mentioned this pull request Sep 30, 2023
@antho1404 antho1404 self-requested a review September 30, 2023 11:34
Copy link
Member

@antho1404 antho1404 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything works as expected, there are still a few translation issues and a few suggestions that I put in #438 but that looks ready to merge to me

@ismailToyran ismailToyran added this pull request to the merge queue Oct 2, 2023
Merged via the queue into dev with commit fb28df1 Oct 2, 2023
@ismailToyran ismailToyran deleted the feature/drops branch October 2, 2023 15:42
This was referenced Oct 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants